<template>
    <el-dialog title="审批流程详情" :close-on-click-modal="false"  :visible.sync="visible">
        <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()">
            <img :src="dataimg" style="width:100%;height:100%;" />
            <div v-if="users.length > 0">
                <ul class="userbox">
                    <li><b>流程审核人：</b></li>
                    <li v-for="(item, i) in users" :key="item.id">
                        <b>{{ item.name }}：</b>
                        {{ item.userName }}<span></span>
                    </li>
                </ul>
            </div>
            <div class="block">
                <el-timeline>
                    <el-timeline-item v-for="(val, key) in list" :timestamp="val.time" placement="top">
                        <el-card>
                            <h4>审批意见：{{ val.fullMessage }}</h4>
                            <p>审批流程：{{ val.taskName }}</p>
                            <p>提交人:{{ val.userName }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" type="primary">关闭</el-button>
            </span>
        </el-form>
    </el-dialog>
</template>

<script>
export default {
    emits: ["refreshDataList"],
    data() {
        return {
            visible: false,
            dataForm: {
                id: 0,
            },
            dataimg: '',
            list: [],
            users: []
        }
    },
    created() { },
    methods: {
        async init(id) {
            this.dataForm.id = id || 0
            console.log(id)
            this.visible = true
            await this.Sevice({ url: 'sys/act/Comment/' + id, method: 'get' }).then(res => {
                console.log(res)
                if (res.code != 200) {
                        this.list = []
                    } else {
                        this.list = res.Comment;
                    }
                }).catch(err => {
                    console.log(err);
                })
                await this.Sevice({ url: 'sys/act/taskUser/' + id, method: 'get' }).then(res => {
                if (res.code != 200) {
                        this.users = []
                    } else {
                        this.users = res.users;
                    }
                }).catch(err => {
                    console.log(err);
                })
                this.dataimg = process.env.VUE_APP_BASE_API + '/sys/act/image/' + id + '?token=' + sessionStorage.getItem("Token") + '&tempid=' + Math.random();
            
        },
        // 表单提交
        dataFormSubmit() {

        },
    },
}
</script>

<style scoped>
.userbox {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0;
}

.userbox li {
    padding: 0 10px 10px 0;
    list-style: none;
    display: flex;
    align-items: center;
}

/* .userbox li span{
		display: block;
		width: 30px;
		height: 1px;
		background: #666666;
	} */</style>
